<template>
	<div class="bookdetail">
		<div class="bgcolor">
			<div class="title">
				<router-link to="/mobile/home">
					< </router-link>
						<h4>详情</h4>
						<p></p>
			</div>
			<div class="body">
				<aside class="first">
					<h3>{{booklist.name}}</h3>
					<aside class="first_right">
						<router-link to="/mobile/cart"><i class="el-icon-shopping-cart-2"></i></router-link>
						<h5>月销量:{{booklist.stock}}</h5>
					</aside>
				</aside>
				<aside class="second">
					<p>书本序号：{{booklist.id}}</p>
					<p>导演:{{booklist.author}}</p>
					<p>编剧:{{booklist.maker}}</p>
					<p>初映时间:{{filterTime(booklist.tmake)}}</p>
				</aside>
				<aside class="third">
					<img :src="`http://127.0.0.1/api/public/showimg/${booklist.pic}`">
					<p></p>
					<router-link to="/mobile/cart">
						<input type="button" value="立即购票" />
					</router-link>
				</aside>
			</div>
			<div class="card">
				<div class="btn">
					<button @click="type='select'">查看留言</button>
					<button @click="type='select2'" class="sele2">查看详情</button>
				</div>
				<div class="container">
					<!-- 子组件监听父组件的事件时 函数不要携带括号 -->
					<!--  @del="DelList" -->
					<SelectMessage v-show="type=='select' " :proplist="chatlist"></SelectMessage>
					<div v-show="type=='select2'" class="binfo">
						<p>{{booklist.info}}</p>
					</div>
				</div>

				<br />
			</div>
			<div class="no"></div>
			<div class="foot">
				<p>Copyrighto 2015-2025 Dianying.com</p>
			</div>
		</div>
	</div>
</template>
<script>
	import SelectMessage from '../../components/mobile/detail/SelectMessage.vue'
	export default {
		name: 'MobileDetail',
		components: {
			SelectMessage
		},
		data() {
			return {
				type: 'select',
				chatlist: [],
				booklist: [],
				hotPic: '',
				id: this.$route.params.bookid,
				token: window.localStorage.getItem('token')
			}
		},
		computed: {
			filterTime() {
				return (t) => {
					console.log(t);
					let year = new Date(t).getFullYear();
					let month = (new Date(t).getMonth() + 1 < 10 ? '0' + (new Date(t).getMonth() + 1) : new Date(t)
						.getMonth() + 1);
					let date = new Date(t).getDate();
					if (date < 10) {
						date = '0' + date;
					}
					return `${year}-${month}-${date}`;
				}
			}
		},
		methods: {
			findbookList() {
				this.$get(`/api/public/book/findById/${this.id}`).then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.booklist = resp.data.data;
					console.log(this.booklist);
				})
			},
			findcomment() {
				this.$get(`/api/public/rate/findByBookid/${this.id}/1/4`).then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.chatlist = resp.data.data;
					console.log(this.chatlist);
					console.log(resp.data.data.content);

				})
			}
		},
		mounted() {
			this.findbookList();
			this.findcomment();
		},
	}
</script>

<style scoped>
	.bookdetail {
		margin-top: -4.2rem;
		background: url('../../assets/view2.jpg');
		color: white;
		top: 0;
		background-size: 100% 100%;
		background-attachment: fixed;
	}

	.bgcolor {
		height: 100%;
		width: 100%;
		background-color: rgba(72, 72, 72, 0.5);
	}

	.title {
		background-color: rgba(40, 40, 40, 0.5);
		/* border-bottom: 1px white solid; */
		margin-top: 0.7rem;
		width: 100%;
		height: 3rem;
		line-height: 3rem;
		display: flex;
		text-align: center;
		justify-content: space-around;
		z-index: 10;
		top: 0;
	}

	.title a {
		text-decoration: none;
		color: white;
	}

	.body {
		margin-top: 1.5rem;
		margin-left: 0.8rem;
	}

	.first {
		width: 95%;
		display: flex;
		justify-content: space-between;
	}

	.first i {
		font-size: 2rem;
	}

	.first h3 {
		margin-top: 1rem;
		margin-left: 2.5rem;
	}

	.first .first_right {
		margin-top: 0.7rem;
		text-align: center;
	}

	.first .first_right a {
		width: 3rem;
		height: 2.5rem;
		color: white;
		text-decoration: none;
	}

	.second p {
		font-size: 1rem;
		font-weight: bold;
		line-height: 1.5rem;
	}

	.third {
		margin-top: 0.8rem;
		text-align: center;
	}

	.third img {
		width: 50%;
		height: 50%;
	}

	.third input {
		background-color: #373b46;
		width: 65%;
		height: 2.3rem;
		color: white;
		font-size: 1rem;
		margin-top: 0.5rem;
		margin-bottom: 1.5rem;
		border-radius: 0.5rem;
	}

	.card {
		background-color: rgba(40, 40, 40, 0.5);
		border-radius: 3rem;
		width: 93%;
		margin-left: 1rem;
		text-align: center;
		line-height: 3rem;
	}

	.card button {
		background-color: #798199;
		border: none;
		height: 2rem;
		border-radius: 3rem;
		color: white;
	}

	.card .sele2 {
		margin-left: 2rem;
	}

	.binfo {
		text-indent: 2rem;
		margin-left: 2rem;
		margin-right: 2rem;
	}

	.no {
		height: 1.5rem;
		width: 100%;
	}

	.foot {
		width: 100%;
		color: white;
		background-color: rgba(40, 40, 40, 0.5);
		text-align: center;
		height: 2.5rem;
		bottom: 0;
		line-height: 2.5rem;
	}
</style>